import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'

import { changeOverallGraphByLegend } from '../../actions/overall'

import { Card, Radio, Checkbox } from 'antd'

class Legend extends Component {
    constructor() {
        super()
        this.state = {
            radioSelected: "all",
            checkboxOptions: {
                all: ['国企', '民企', '外企', '型号', '整机', '分系统', '组合', '物资', '正常产能', '独子线产能'],
                enterprise: ['国企', '民企', '外企'],
                product: ['型号', '整机', '分系统', '组合', '物资'],
                power: ['正常产能', '独子线产能']
            },
            checkedList: ['国企', '民企', '外企', '型号', '整机', '分系统', '组合', '物资', '正常产能', '独子线产能'],
            indeterminate: false,
            checkAll: true
        }
    }

    updateGraphData = () => {
        let updateNodes = []
        let updateLinks = []
        let names = []

        this.props.graphData.nodes.map((node) => {
            if(this.state.checkedList.includes(node.group)) {
                updateNodes.push(node)
                names.push(node.id)
            }
            return node
        })
        this.props.graphData.links.map((link) => {
            if(names.includes(link.source.id) && names.includes(link.target.id)) {
                updateLinks.push(link)
            }
            return link
        })

        this.props.changeOverallGraphByLegend({
            graph: {nodes: updateNodes, links: updateLinks}
        })
    }

    onRadioChange = (event) => {
        this.setState({
            radioSelected: event.target.value,
            checkedList: this.state.checkboxOptions[event.target.value],
            checkAll: true,
            indeterminate: false
        }, () => {
            this.updateGraphData()
        })
    }

    onCheckAllChange = (event) => {
        this.setState({
            checkedList: event.target.checked ? this.state.checkboxOptions[this.state.radioSelected] : [],
            checkAll: event.target.checked,
            indeterminate: false
        }, () => {
            this.updateGraphData()
        })
    }

    onCheckGroupChange = (checkedValues) => {
        // TODO: 做checkbox和整个图数据的联动，图数据可以通过使用redux进行管理
        this.setState({
            checkedList: checkedValues, 
            indeterminate: !!checkedValues.length && checkedValues.length < this.state.checkboxOptions[this.state.radioSelected].length,
            checkAll: checkedValues.length === this.state.checkboxOptions[this.state.radioSelected].length
        }, () => {
            this.updateGraphData()
        })
    }

    render() {
        return (
            <div className="graph-overall-legend">
                <Card 
                    title={<h1 style={{ textAlign: "center", fontSize: '20px', fontWeight: "bold" }}>图例详情</h1>} 
                    bordered={false} 
                    style={{ width: 300, height: 860 }}
                >
                    <Radio.Group defaultValue="all" buttonStyle="solid" onChange={this.onRadioChange}>
                        <Radio.Button value="all">全部</Radio.Button>
                        <Radio.Button value="enterprise">企业</Radio.Button>
                        <Radio.Button value="product">产品</Radio.Button>
                        <Radio.Button value="power">产能</Radio.Button>
                    </Radio.Group>

                    <br />
                    <br />

                    <Checkbox
                        indeterminate={this.state.indeterminate}
                        onChange={this.onCheckAllChange}
                        checked={this.state.checkAll}
                    >全选</Checkbox>
                    <br />
                    <Checkbox.Group
                        onChange={this.onCheckGroupChange}
                        value={this.state.checkedList}
                    >
                        {
                            this.state.checkboxOptions[this.state.radioSelected].map(checkboxValue => {
                                return (
                                    <Fragment key={checkboxValue}>
                                        <Checkbox value={checkboxValue}>{checkboxValue}</Checkbox>
                                        <br />
                                    </Fragment>
                                )
                            })
                        }
                    </Checkbox.Group>
                </Card>
            </div>
        )
    }
}


const mapStateToProps = (state) => ({
    graphData: state.overall.graph
})


export default connect(mapStateToProps, { changeOverallGraphByLegend })(Legend)